<script setup>
import { ref, watch, onMounted } from 'vue'
import Papa from 'papaparse'

// 动态引入所有CSV
import qubo_5_3 from '../../../assets/csvs/qubo_flow_num_3_node_num_5.csv?raw'
import qubo_5_2 from '../../../assets/csvs/qubo_flow_num_2_node_num_5.csv?raw'
import qubo_4_3 from '../../../assets/csvs/qubo_flow_num_3_node_num_4.csv?raw'
import qubo_4_2 from '../../../assets/csvs/qubo_flow_num_2_node_num_4.csv?raw'

// 传入的参数
const props = defineProps([
  'nodeCount',
  'flowCount'
])

const csvMap = {
  '5_3': qubo_5_3,
  '5_2': qubo_5_2,
  '4_3': qubo_4_3,
  '4_2': qubo_4_2,
}

const tableData = ref([])

const loadCSV = () => {
  const key = `${props.nodeCount}_${props.flowCount}`
  const csvText = csvMap[key]
  if (!csvText) {
    tableData.value = []
    return
  }
  const parsed = Papa.parse(csvText.trim())
  tableData.value = parsed.data
}

watch(() => [props.nodeCount, props.flowCount], loadCSV, { immediate: true })
onMounted(loadCSV)
</script>

<template>
  <div class="qubo-table-wrapper">
    <table class="qubo-table">
      <tbody>
        <tr v-for="(row, i) in tableData" :key="i">
          <td v-for="(cell, j) in row" :key="j">{{ Math.round(cell) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.qubo-table-wrapper {
  max-height: 100%;
  max-width: 90vw;
  overflow: auto;
  background: #000;
  margin: 0 auto;
  /* 自定义滚动条 */
  scrollbar-width: thin;
  scrollbar-color: #1CC9BE #222;
}
.qubo-table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #222;
}
.qubo-table-wrapper::-webkit-scrollbar-thumb {
  background: #1CC9BE;
  border-radius: 4px;
}
.qubo-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 800px;
}
.qubo-table td {
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  text-align: center;
  padding: 2px 6px;
  font-size: 14px;
  min-width: 32px;
}
</style>
